<div #tparent>
  <div
    *ngIf="nzTableTheadConfig && nzTableTheadConfig.length > 0"
    class="eo-test-table-opr-btns"
    style="
      display: flex;
      margin-top: 6px;
      position: absolute;
      z-index: 4;
      right: 10px;
    "
  >
    <eo-ng-dropdown
      style="cursor: pointer"
      [title]="dropdownTitleTpl"
      [itemTmp]="dropdownMenTpl"
      [menus]="nzTableTheadConfig"
      trigger="click"
      overlayClassName="eo-monitor-table-dropdown"
    >
    </eo-ng-dropdown>
    <ng-template #dropdownTitleTpl>
      <svg class="iconpark-icon">
        <use href="#setting"></use>
      </svg>
    </ng-template>
    <ng-template #dropdownMenTpl let-item="item">
      <label
        style="width: 100%"
        (click)="$event.stopPropagation()"
        class="eo-test-app-checkbox"
        (ngModelChange)="
          nzChangeTableConfigChange.emit({ value: $event, item: item })
        "
        eo-ng-checkbox
        [(ngModel)]="item.checked"
        >{{ item.title }}</label
      >
    </ng-template>
  </div>
  <eo-ng-table
    [ngClass]="{ cursorPointer: cursorPointer }"
    [nzTbody]="nzTbody"
    [nzThead]="nzThead"
    [nzData]="nzData"
    [nzTrClick]="nzTrClick"
    [nzTotal]="nzTotal"
    [nzPageIndex]="nzPageIndex"
    [nzPageSize]="nzPageSize"
    [nzFrontPagination]="nzFrontPagination"
    [nzShowPagination]="nzShowPagination"
    [nzPageSizeOptions]="nzPageSizeOptions"
    [nzShowSizeChanger]="nzShowPagination"
    [nzShowQuickJumper]="nzShowPagination"
    [nzShowTotal]="totalTpl"
    [nzScroll]="nzScroll"
    [nzCheckAddRow]="nzCheckAddRow"
    (nzFilterChange)="nzFilterChange.emit($event)"
    (nzPageIndexChange)="nzPageIndexChange.emit($event)"
    (nzPageSizeChange)="nzPageSizeChange.emit($event)"
    (nzDataChange)="nzDataChange.emit($event)"
    [nzTrBottomTmp]="nzTrBottomTmp"
    [nzDraggable]="nzDraggable"
    [nzDragCheck]="nzDragCheck"
    (nzDragEnd)="nzDragEnd.emit($event)"
    (getScrollViewPort)="handlerScrollView($event)"
    [nzLoading]="nzLoading"
    [nzLoadingIndicator]="nzLoadingIndicator"
    [nzVirtualMaxItems]="nzVirtualMaxItems"
  >
  </eo-ng-table>
  <ng-template #totalTpl let-total>共 {{ nzTotal }} 条</ng-template>
  <ng-template #theadTpl let-item="item" let-index="i">
    <span
      eoNgFeedbackTooltip
      nzTooltipPlacement="topLeft"
      [nzTooltipTitle]="item.tooltip || ''"
      [nzTooltipTitleContext]="item"
      [nzTooltipVisible]="item.tooltipVisible || false"
      [nzTooltipTrigger]="item.tooltip ? item.tooltipTrigger || 'hover' : null"
    >
      <span *ngIf="item.required" class="required-symbol">*</span
      ><span class="default-title-th-span">{{ item.titleString }}</span>
    </span>
  </ng-template>

  <ng-template #tbodyTpl let-item="item" let-rowItem="rowItem">
    <div class="leading-[22px] flex items-center">
      <span
        class="mr-[8px] inline-block truncate"
        eoNgFeedbackTooltip
        nzTooltipPlacement="topLeft"
        [nzTooltipTitle]="
          rowItem.json
            ? transferToJson(
                item[rowItem.key + 'Tooltip'] ||
                  (rowItem.keyPrefix || '') +
                    item[rowItem.key] +
                    (rowItem.keySuffix || '')
              )
            : item[rowItem.key + 'Tooltip'] ||
              (rowItem.keyPrefix || '') +
                item[rowItem.key] +
                (rowItem.keySuffix || '')
        "
        [nzTooltipTitleContext]="{ rowItem: rowItem, item: item }"
        [nzTooltipVisible]="rowItem.tooltipVisible || false"
        [nzTooltipTrigger]="rowItem.tooltipTrigger || 'hover'"
        [nzTooltipOverlayClassName]="rowItem.json ? 'tooltip-json' : ''"
        >{{ rowItem.keyPrefix }}{{ item[rowItem.key] }}{{ rowItem.keySuffix }}
      </span>

      <span
        *ngIf="
          rowItem.copy &&
          (rowItem.keyPrefix || '') +
            item[rowItem.key] +
            (rowItem.keySuffix || '')
        "
        class="h-[20px] leading-[22px] text-[12px] opacity-0 cursor-pointer inline-flex items-center"
        eo-copy
        nzType="primary"
        [copyText]="
          (rowItem.keyPrefix || '') +
          item[rowItem.key] +
          (rowItem.keySuffix || '')
        "
        (copyCallback)="copyCallback()"
        (click)="$event.stopPropagation()"
      >
        <svg class="iconpark-icon">
          <use href="#copy"></use>
        </svg>
      </span>
    </div>
  </ng-template>
</div>
